<template>
    <div class="take">
        <h5 class="mb-10 flex aic title" @click="emits('change')">PURCHASE TAKE LIST</h5>
        <div class="orderlist phighit">
            <el-table ref="orderList" :data="purcharseTakeList" :row-class-name="TakeList"
                v-el-table-infinite-scroll="refresh" @row-click="getPurTakeID" height="100%">
                <el-table-column fixed prop="PI_name" label="Ptask ID" width="150" />
                <el-table-column prop="sale" label="Sales 销售" width="120" />
                <el-table-column prop="State" label="Sate" />
                <el-table-column prop="purchaser" label="Purchase" width="120" />
                <el-table-column prop="items" label="Items" width="120" />
                <el-table-column prop="create_time" sortable label="CreationTime" width="200" />

            </el-table>
        </div>

    </div>
</template>

<script setup>
const props = defineProps({
    purcharseTakeList: Object,
    purchaseordertesk_id: Number
})

const TakeList = ({ row }) => {
    if (row.purchaseordertesk_id == props.purchaseordertesk_id) {
        return 'highlight'
    }
    return ''
}
const emits = defineEmits(['change', 'refreshPurTakeList', 'getPurTake'])
const refresh = () => {
    emits('refreshPurTakeList')
}
const getPurTakeID = (row) => {
    emits('getPurTake', row)
}

</script>

<style lang="less" >
.take {
    width: 100%;

    .highlight {
        background-color: rgba(174, 179, 179, 0.219) !important;
    }

    .el-table {
        --el-table-row-hover-bg-color: rgba(174, 179, 179, 0.219);
    }

    .title {
        height: 41px;
        padding-left: 10px;
    }

    .orderlist {
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;

    }

    .phighit {
        height: 426px;
    }

    .el-table .cell {
        padding: 0;
    }
}
</style>